<template>
  <div>
    <button @click="color = 'orange'">改颜色</button>
    <p v-color="color">这是p标签</p>

    <my-son />
  </div>
</template>

<script>
import MySon from './components/MySon.vue'

export default {
  components: {
    MySon
  },
  data () {
    return {
      color: 'blue'
    }
  },
//   // 自己创造的指令就叫自定义指令
//   directives: {
//     // el就是绑定指令的对象
//     // 参数2： 指令的相关信息，其中最主要的是value属性,value属性有指令绑定的最终的值
//     // color (el, obj) {
//     //     // console.log(obj)
//     //     el.style.color = obj.value
//     // }
//     color: {
//       // 当指令绑定到这个dom元素时调用
//       bind (el, obj) {
//         console.log('bind')
//         el.style.color = obj.value
//       },
//       // 当数据发生改变时调用
//       update (el, obj) {
//         console.log('update')
//         el.style.color = obj.value
//       }
//     }
//   }
}
</script>

<style></style>
